<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-loading="loading">
        <el-card>
            <div class="myheader">
                <div class="part-left">
                    <position-selector v-model="positionId"></position-selector>
                </div>

                <div class="part-right">
                    <div class="block">
                        <el-button :disabled="loading" icon="el-icon-refresh" size="small" type="default" 
                            @click="loadData">刷新数据</el-button>
                    </div>

                    <div class="block">
                        <el-button size="small" type="primary" icon="el-icon-plus"
                            @click="newFormHandle">新建</el-button>
                    </div>
                </div>
            </div>
            <el-table :data="items" size="mini" highlight-current-row @row-click="itemSelect">
                <el-table-column prop="id" label="#" />
                <el-table-column label="按钮显示效果">
                    <template slot-scope="scope">
                        <div style="width:100px;">
                            <nav-item :nav="scope.row"></nav-item>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="size" label="按钮尺寸(%)"> </el-table-column>

                <el-table-column label="内部文字" prop="inner_text"> </el-table-column>
                <el-table-column label="右上角文字" prop="badge_text"> </el-table-column>
                <el-table-column label="所属页面" prop="position"> </el-table-column>
                <el-table-column label="排序" prop="number"> </el-table-column>

                <el-table-column label="显示">
                    <template slot-scope="scope">
                        {{ scope.row.public ? "已显示" : "未显示" }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" :width="140">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="editHandle(scope.row)">编辑</el-link>
                        <el-link type="danger" @click="deleteHandle(scope.row.id)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <nav-item-form @cancle="cancleHandle" @change="changeHandle" ref="navform"></nav-item-form>


    </div>
</template>

<style lang="scss" scoped>
.inline {
    display: flex;
    justify-content: space-between;
}

.icon-uploader .el-upload,
.icon-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 355px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-uploader img {
    width: 355px;
    height: 150px;
}

.icon-uploader .el-upload:hover {
    border-color: #409eff;
}

.app-container {
    .myheader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0px;

        .part-right {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .block {
                margin-left: 10px;
            }
        }

        .part-left {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .block {
                margin-right: 10px;
            }
        }

        .el-input {
            width: 250px;
            border-radius: 100%;
        }
    }
}
</style>

<script>
import { getNavList, updateNav, deleteNav } from "@/api/nav";
import NavItemForm from '@/components/NavItemForm'
import ImagePicker from "@/components/ImagePicker";
import LinkEditor from "@/components/LinkEditor.vue";
import NavItem from '../modules/NavItem.vue'
import PositionSelector from "@/components/PositionSelector";

export default {
    name: "navs",
    components: { ImagePicker, LinkEditor, NavItem, NavItemForm, PositionSelector, },
    data () {
        return {
            showMore: false,
            cats: [],
            total: 0,
            positionId: null,
            // per_page: 20,
            // page: 1,
            allItems: [],
            loading: false,
            currentItem: null,
        };
    },
    props: {},

    computed: {
        submitBtnText () {
            return this.currentItem.id ? "保存" : "创建";
        },

        items: function () {
            if (!this.positionId) {
                return this.allItems || []
            }
            return this.allItems.filter((nav, i) => {
                return nav.position_id == this.positionId
            })
        },

    },

    mounted: function () {
        this.loadData();
    },

    methods: {
        cancleHandle: function () {
            if (this.currentItem.id) {
                this.loadData()
            }
        },

        changeHandle: function () {
            this.loading = true
            this.loadData()
            this.currentItem = {}
        },
        updateCurrentPage: function (page) {
            this.page = page;
        },

        updatePageSize: function (size) {
            this.per_page = size || 10;
        },

        newFormHandle: function () {
            var nav = {
                id: null,
                name: '导航按钮',
                color: '#333333',
                size: 100,
                link: {},
                inner_text: '',
                badge_text: '',
                position_id: null,
                public: true,
                icon: null,
            };
            this.$refs.navform.openDialog(nav)
        },
        editHandle: function (item) {
            this.$refs.navform.openDialog(item)
        },

        itemSelect: function (item) {
            this.currentItem = item;
        },

        deleteHandle: function (itemId) {
            var _this = this;
            this.$confirm("确定要删除这个按钮吗?", {
                confirmButtonText: "确定删除",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                deleteNav(itemId).then((resp) => {
                    _this.currentItem = {};
                    _this.loadData();
                });
            });
        },



        loadData: function () {
            this.loading = true;
            var query = {
                // page: this.page,
                // per_page: this.per_page,
            };
            getNavList(query).then((resp) => {
                this.allItems = resp.data.map((item, i) => {
                    return item;
                });
                // this.total = resp.total;
                this.loading = false;
            });
        },
    },
};
</script>
